<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="divWarehouse">
    <div class="divContent">
      <el-form class="form-x" ref="form" :model="form" label-width="80px">
        <el-row style="height: 98px; margin-left: -15px; margin-right: -15px">
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">仓库编号</div>

            <el-input
              clearable
              :disabled="true"
              v-model="form.code"
              placeholder="请输入"
            ></el-input>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">所属仓库</div>

            <el-select
              clearable
              style="width: 100%"
              v-model="form.logicDel"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in WarehouseList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">库区名称</div>

            <el-input
              clearable
              v-model="form.name"
              placeholder="请输入"
            ></el-input>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">温度类型</div>

            <el-select
              clearable
              style="width: 100%"
              v-model="form.temperatureType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in temperatureType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row style="height: 98px; margin-left: -15px; margin-right: -15px">
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">承重类型</div>

            <el-select
              clearable
              style="width: 100%"
              v-model="form.bearingType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in bearingType"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>

          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">用途属性</div>

            <el-select
              clearable
              style="width: 100%"
              v-model="form.useType"
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in uesList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">负责人</div>

            <el-input
              clearable
              v-model="form.personName"
              placeholder="请输入"
            ></el-input>
          </el-col>
          <el-col
            :span="6"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">联系电话</div>

            <el-input
              clearable
              v-model="form.phone"
              placeholder="请输入"
            ></el-input>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <el-row style="height: 98px; margin-left: -15px; margin-right: -15px">
          <el-col
            :span="8"
            style="height: 98px; padding-left: 15px; padding-right: 15px"
          >
            <div class="divLable">库区状态</div>
            <div class="radios">
              <template>
                <el-radio v-model="form.status" label="1">启用</el-radio>
                <el-radio v-model="form.status" label="0">停用</el-radio>
              </template>
            </div>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center">
          <el-form-item>
            <el-button style="width: 170px" @click="$router.go(-1)" round
              >返回</el-button
            >
            <el-button
              style="width: 170px"
              type="warning"
              round
              @click="onSubmit"
              >提交</el-button
            >
          </el-form-item>
        </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { postWare, putWare } from '@/api/warehouse'
import { regionData, TextToCode } from 'element-china-area-data'
import { Kq } from '@/api/area'
export default {
  data () {
    return {
      WarehouseList: [
        { label: '一号仓库', value: '0' },
        { label: '二号仓库', value: '1' },
        { label: '三号仓库', value: '2' }
      ],
      uesList: [
        { label: '入库缓存区', value: 'RKHCQ' },
        { label: '出库缓存区', value: 'CKHCQ' },
        { label: '存储区', value: 'CCQ' },
        { label: '分拣区', value: 'FJQ' },
        { label: '质检区', value: 'ZJQ' }
      ],
      temperatureType: [
        { label: '常温', value: 'CW' },
        { label: '冷藏', value: 'LC' },
        { label: '恒温', value: 'HW' }
      ],
      bearingType: [
        { label: '重型', value: 'ZX' },
        { label: '轻型', value: 'QX' }
      ],
      // 封装的省市区
      options: regionData,
      selectedOptions: [],
      form: {
        code: '',
        status: '1',
        name: '',
        phone: '',
        useType: '',
        temperatureType: '',
        bearingType: ''
      },
      radio: '1'
    }
  },
  async created () {
    console.log(this.$route.query)
    if (this.$route.query.key) {
      console.log(2)

      this.form = {
        code: this.$route.query.key.code,
        logicDel: String(this.$route.query.key.logicDel),
        bearingType: this.$route.query.key.bearingType,
        name: this.$route.query.key.name,
        temperatureType: this.$route.query.key.temperatureType,
        useType: this.$route.query.key.useType,
        personName: this.$route.query.key.personName,
        phone: this.$route.query.key.phone,
        status: String(this.$route.query.key.status)
      }
      console.log(this.form)
    } else {
      console.log(1)
      this.Kq()
    }
  },
  methods: {
    // 封装的省市区
    handleChange (value) {
      this.$emit('provincesValueChang', value)
    },
    async Kq () {
      const {
        data: { data }
      } = await Kq()

      this.form.code = data
    },
    async onSubmit () {
      const city = String(this.form.location[1])
      this.form.location = `${this.form.location[0]}/${this.form.location[1]}/${this.form.location[2]}`
      this.form.area =
        TextToCode[this.form.location.split('/')[0]][
          this.form.location.split('/')[1]
        ][this.form.location.split('/')[2]].code
      if (city === '市辖区') {
        this.form.city = String(
          Math.trunc(this.form.area / 10000) * 10000 + 9900
        )
      } else {
        this.form.city = String(Math.trunc(this.form.area / 100) * 100)
      }
      this.form.province = String(Math.trunc(this.form.area / 10000) * 10000)
      if (this.$route.query.key) {
        for (const key in this.$route.query.key) {
          this.form[key] = this.$route.query.key[key]
        }
        await putWare(this.$route.query.key).then(() => {
          this.$router.push('warehouseManagement')
        })
      } else {
        await postWare(this.form).then(() => {
          this.$router.push('warehouseManagement')
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input el-input-group el-input-group--append {
  display: flex;
  justify-content: space-around;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background-color: #ffb200;
  border: #ffb200;
}
::v-deep .el-radio__input.is-checked + .el-radio__label {
  color: #ffb200;
}
.radios {
  margin-top: 50px;
}
.divWarehouse {
  margin: 20px;

  .divContent {
    // height: 500px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 0 6px 0 rgb(144 142 142 / 17%);
    padding: 30px;
    padding-bottom: 0px;
    margin-bottom: 20px;
  }
}
::v-deep .divLable {
  text-align: right;
  vertical-align: middle;
  line-height: 18px;
  float: left;
  font-size: 8px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
::v-deep.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
::v-deep .el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 100%;
}
::v-deep .el-input__inner {
  height: 40px;
  line-height: 40px;
  border: 1px solid #f8f5f5;
  background: #f8f5f5;
  border-radius: 6px;
}
// ::v-deep .el-input--medium .el-input__inner {
//   height: 40px;
//   line-height: 40px;
//   border: 1px solid #f8f5f5;
//   background: #f8f5f5;
//   border-radius: 6px;
// }
::v-deep .el-input .el-input__inner:hover {
  border: 1px solid #686867;
}
::v-deep .el-input .el-input__inner:focus {
  border: 1px solid #ffc12f;
}
</style>
